<template>
	<div>
		<el-row>
		  <el-col :span="24">
				<el-menu
				  :default-active="activeIndex"
				  class="el-menu-demo"
				  mode="horizontal"
				  @select="handleSelect"
				  background-color="#545c64"
				  text-color="#fff"
				  active-text-color="#ffd04b">
				  <el-menu-item index="jobs">任务列表</el-menu-item>
				  <el-menu-item index="logs">运行日志</el-menu-item>
				  <el-menu-item index="livy">livy 控制台 <i class="my-icon-menu el-icon-refresh" title="刷新" @click="flushIFrame"></i></el-menu-item>
          <el-menu-item index="upload">文件上传</el-menu-item>
          <el-menu-item index="add">创建任务</el-menu-item>
          <el-menu-item index="status">服务状态</el-menu-item>
				</el-menu>
			</el-col>
		</el-row>
		<el-row>
		  <el-col :span="24" :style="workarea">
		  	<jobs v-show="visiable.jobs" :winP="winP" :jobs="jobs" v-on:flush="getAllJobs"></jobs>
		  	<logs v-show="visiable.logs" :winP="winP"></logs>
		  	<iframe ref="livy" frameborder="0" :src="livyHost" :width="iframeWidth" :height="iframeHeight" v-show="visiable.livy"></iframe>
        <upload v-show="visiable.upload" :winP="winP"></upload>
        <add v-show="visiable.add" v-on:add="addJob"></add>
        <status v-show="visiable.status" :winP="winP"></status>
		  </el-col>
		</el-row>
		<el-row>
		  <el-col :span="24">
		  	<div class="copyright">
			  	© lian.zt | 2018 | antian_369@163.com
		  	</div>
		  </el-col>
		</el-row>
	</div>
</template>

<script>
  import jobs from './jobs'
  import logs from './logs'
  import upload from './upload'
  import add from './add'
  import status from './status'

  export default {
    data() {
      return {
        activeIndex: 'jobs',
        livyHost: process.env.LIVY_HOST,
        jobs:[],
        visiable: {
        	jobs: true,
        	logs: false,
        	livy: false,
          upload: false,
          add: false,
          status: false
        },
        winP: {
        	height: Number(window.innerHeight),
        	width: Number(window.innerWidth)
        }
      };
    },
    mounted(){
      window.onresize = () => {
        this.winP.height = Number(window.innerHeight)
        this.winP.width = Number(window.innerWidth)
      }
      window.onresize()
      this.getAllJobs()
    },
    computed: {
    	iframeHeight () {
    		return this.winP.height - 96
    	},
    	iframeWidth () {
    		return this.winP.width - 5
    	},
    	workarea () {
    		return {
    			width: '100%',
    			height: `${this.iframeHeight}px`,
    			'overflow-y': 'auto'
    		}
    	}
    },
    methods: {
      handleSelect(key, keyPath) {
      	for (let i in this.visiable) {
      		this.visiable[i] = false
      	}
      	this.visiable[key] = true
      },
      flushIFrame () {
        this.$refs['livy'].src = this.$refs['livy'].src
      },
      async getAllJobs () {
        let jobs = await this.$api.call({
          service: 'getall'
        })
        console.log('jobs: ', jobs)
        this.$set(this, 'jobs', jobs)
      },
      addJob (job) {
        this.jobs.push(job) 
      }
    },
    components: {
    	jobs, logs, upload, add, status
    }
  }
</script>
<style type="text/css">
	body {
		margin: 0;
	}
	.copyright {
    font-size: 12px;
    color: #aaa;
    text-align: center;
    height: 30px;
    border-top: 1px solid;
    line-height: 30px;
	}
</style>